<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>OpenLayers v8.2.0 API - Module: ol/render</title>
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css"
        crossorigin="anonymous">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="styles/prettify-tomorrow.css">
    <link rel="stylesheet" type="text/css" href="styles/jaguar.css">
    <link rel="stylesheet" type="text/css" href="styles/carbon.css">
    <link rel="stylesheet" type="text/css" href="/theme/ol.css">
    <link rel="stylesheet" type="text/css" href="/theme/site.css">
</head>

<body>
    <header class="navbar navbar-expand-sm navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
        <a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70"
                alt="">&nbsp;OpenLayers</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu"
            aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- menu items that get hidden below 768px width -->
        <nav class="collapse navbar-collapse" id="olmenu">
            <ul class="nav navbar-nav ms-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button"
                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
                    <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
                        <a class="dropdown-item" href="/doc/">Docs</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="/doc/quickstart.html"><i
                                class="fa fa-check fa-fw me-2 fa-lg"></i>快速入门</a>
                        <a class="dropdown-item" href="/doc/faq.html"><i
                                class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
                        <a class="dropdown-item" href="/doc/tutorials/"><i
                                class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i
                                class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
                    </div>
                </li>
                <li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button"
                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-sitemap me-1"></i>API
                    </a>
                    <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
                        <a class="dropdown-item" href="/en/latest/apidoc/"><i
                                class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v8.2.0
                            (latest)</a </div>
                </li>
            </ul>
        </nav>
    </header>

    <div class="container-fluid">
        <div id="wrap" class="row">
            <div class="navigation col-md-4 col-lg-3">
                <div class="search-wrapper">
                    <div class="search">
                        <input id="search" type="text" autocomplete="off" class="form-control input-sm"
                            placeholder="Search Documentation">
                    </div>
                </div>
                <div class="navigation-list-wrapper">
                    <ul class="navigation-list search-empty">
                        <li class="item item-module toggle-manual toggle-manual-show" data-longname="module:ol/render"
                            data-name="ol/render">
                            <span class="title toggle">
                                <span class="fa fa-plus me-2 mt-1"></span>
                                <span><a href="module-ol_render.html">ol​/render</a></span>
                            </span>
                            <div class="member-list" data-type="typedefs">
                                <span class="subtitle">Typedefs</span>
                                <ul>
                                    <li data-name="orderfunction"><a
                                            href="module-ol_render.html#~OrderFunction">OrderFunction</a>
                                    <li data-name="state"><a href="module-ol_render.html#~State">State</a>
                                    <li data-name="tocontextoptions"><a
                                            href="module-ol_render.html#~ToContextOptions">ToContextOptions</a>
                                </ul>
                            </div>
                            <div class="member-list" data-type="methods">
                                <span class="subtitle">Methods</span>
                                <ul>
                                    <li data-name="getrenderpixel"><a
                                            href="module-ol_render.html#.getRenderPixel">getRenderPixel</a>
                                    <li data-name="getvectorcontext"><a
                                            href="module-ol_render.html#.getVectorContext">getVectorContext</a>
                                    <li data-name="tocontext"><a href="module-ol_render.html#.toContext">toContext</a>
                                </ul>
                            </div>
                        <li class="loading">Loading …
                    </ul>
                </div>
            </div>

            <div class="main col-md-8 col-lg-9">
                <h1 class="page-title" data-filename="module-ol_render.html">Module: ol/render</h1>
                <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
                    <button id="latest-dismiss" type="button" class="btn-close" data-bs-dismiss="alert"
                        aria-label="Close"></button>
                    This documentation is for OpenLayers v<span id="package-version">8.2.0</span>. The <a
                        id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
                </div>




                <section class="content">

                    <header>
                        <h2 class="my-3">ol/render
                        </h2>
                        <br>



                        <pre class="prettyprint source"><code>import * as olRender from 'ol/render';</code></pre>


                        <div class="row p-3 ">
                            <!-- <div id="ad" class="col-lg-5 order-2 align-self-center border rounded bg-light ">
                                <script async type="text/javascript"
                                    src="https://cdn.carbonads.com/carbon.js?serve=CE7DV53U&placement=openlayersorg"
                                    id="_carbonads_js"></script>
                            </div> -->

                        </div>
                    </header>

                    <article>
                        <div class="container-overview">






                            <dl class="details">





















                            </dl>




                        </div>


















                        <h3 class="subsection-title">Functions</h3>

                        <dl>


                            <dt class="">

                                <div class="nameContainer">
                                    <div class="anchor" id=".getRenderPixel">
                                    </div>
                                    <h4 class="name">
                                        getRenderPixel<span class="signature">(event, pixel)</span><span
                                            class="fa fa-arrow-circle-right"></span><span
                                            class="type-signature returnType">{<a
                                                href="module-ol_pixel.html#~Pixel">Pixel</a>}</span>



                                    </h4>

                                    <div class="tag-source">
                                        <a
                                            href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/render.js">render.js</a>,
                                        <a
                                            href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/render.js#L139">line
                                            139</a>
                                    </div>

                                </div>


                            </dt>
                            <dd class="">



                                <pre
                                    class="prettyprint source"><code>import {getRenderPixel} from 'ol/render';</code></pre>



                                <div class="description">
                                    <p>从地图视口的CSS像素中获取事件画布上下文的像素。
                                    </p>
                                </div>










                                <table class="params">
                                    <thead>
                                        <tr>

                                            <th>Name</th>


                                            <th>Type</th>

                                            <th class="last">Description</th>
                                        </tr>
                                    </thead>

                                    <tbody>


                                        <tr class="">

                                            <td class="name"><code>event</code></td>



                                            <td class="type">


                                                <span class="param-type"><a
                                                        href="module-ol_render_Event-RenderEvent.html">RenderEvent</a></span>




                                            </td>



                                            <td class="description last">

                                                <p>渲染事件。</p>
                                            </td>
                                        </tr>



                                        <tr class="">

                                            <td class="name"><code>pixel</code></td>



                                            <td class="type">


                                                <span class="param-type"><a
                                                        href="module-ol_pixel.html#~Pixel">Pixel</a></span>




                                            </td>



                                            <td class="description last">

                                                <p>相对于地图视口左上角的CSS像素。</p>
                                            </td>
                                        </tr>


                                    </tbody>
                                </table>




                                <dl class="details">





















                                </dl>















                                <h5>Returns:</h5>
                                事件画布上下文中的像素。
                                <br />




                            </dd>




                            <dt class="">

                                <div class="nameContainer">
                                    <div class="anchor" id=".getVectorContext">
                                    </div>
                                    <h4 class="name">
                                        getVectorContext<span class="signature">(event)</span><span
                                            class="fa fa-arrow-circle-right"></span><span
                                            class="type-signature returnType">{<a
                                                href="module-ol_render_canvas_Immediate-CanvasImmediateRenderer.html">CanvasImmediateRenderer</a>}</span>



                                    </h4>

                                    <div class="tag-source">
                                        <a
                                            href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/render.js">render.js</a>,
                                        <a
                                            href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/render.js#L93">line
                                            93</a>
                                    </div>

                                </div>


                            </dt>
                            <dd class="">



                                <pre
                                    class="prettyprint source"><code>import {getVectorContext} from 'ol/render';</code></pre>



                                <div class="description">
                                    <p>获取用于绘制事件画布的向量上下文。</p>
                                </div>










                                <table class="params">
                                    <thead>
                                        <tr>

                                            <th>Name</th>


                                            <th>Type</th>

                                            <th class="last">Description</th>
                                        </tr>
                                    </thead>

                                    <tbody>


                                        <tr class="">

                                            <td class="name"><code>event</code></td>



                                            <td class="type">


                                                <span class="param-type"><a
                                                        href="module-ol_render_Event-RenderEvent.html">RenderEvent</a></span>




                                            </td>



                                            <td class="description last">

                                                <p>Render event.</p>
                                            </td>
                                        </tr>


                                    </tbody>
                                </table>




                                <dl class="details">





















                                </dl>















                                <h5>Returns:</h5>
                                Vector context.
                                <br />




                            </dd>




                            <dt class="">

                                <div class="nameContainer">
                                    <div class="anchor" id=".toContext">
                                    </div>
                                    <h4 class="name">
                                        toContext<span class="signature">(context, <span
                                                class="optional">options</span>)</span><span
                                            class="fa fa-arrow-circle-right"></span><span
                                            class="type-signature returnType">{<a
                                                href="module-ol_render_canvas_Immediate-CanvasImmediateRenderer.html">CanvasImmediateRenderer</a>}</span>



                                    </h4>

                                    <div class="tag-source">
                                        <a
                                            href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/render.js">render.js</a>,
                                        <a
                                            href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/render.js#L71">line
                                            71</a>
                                    </div>

                                </div>


                            </dt>
                            <dd class="">



                                <pre class="prettyprint source"><code>import {toContext} from 'ol/render';</code></pre>



                                <div class="description">
                                    <p>将Canvas Immediate API绑定到画布上下文，以便将几何图形绘制到上下文的画布上。</p>
                                    <p>几何坐标的单位是相对于画布元素左上角的CSS像素。</p>
                                    <pre class="prettyprint source lang-js"><code>import {toContext} from 'ol/render.js';
import Fill from 'ol/style/Fill.js';
import Polygon from 'ol/geom/Polygon.js';

const canvas = document.createElement('canvas');
const render = toContext(
    canvas.getContext('2d'),
    {size: [100, 100]}
);
render.setFillStrokeStyle(new Fill({ color: blue }));
render.drawPolygon(
    new Polygon([[[0, 0], [100, 100], [100, 0], [0, 0]]])
);</code></pre>
                                </div>










                                <table class="params">
                                    <thead>
                                        <tr>

                                            <th>Name</th>


                                            <th>Type</th>

                                            <th class="last">Description</th>
                                        </tr>
                                    </thead>

                                    <tbody>


                                        <tr class="">

                                            <td class="name"><code>context</code></td>



                                            <td class="type">


                                                <span class="param-type">CanvasRenderingContext2D</span>




                                            </td>



                                            <td class="description last">

                                                <p>Canvas context.</p>
                                            </td>
                                        </tr>



                                        <tr class="">

                                            <td class="name"><code>options</code></td>




                                            <td colspan=2 class="description last">

                                                <p>Options.</p>


                                                <table class="params">
                                                    <thead>
                                                        <tr>

                                                            <th>Name</th>


                                                            <th>Type</th>

                                                            <th class="last">Description</th>
                                                        </tr>
                                                    </thead>

                                                    <tbody>


                                                        <tr class="">

                                                            <td class="name"><code>size</code></td>



                                                            <td class="type">


                                                                <span class="param-type"><a
                                                                        href="module-ol_size.html#~Size">Size</a></span>

                                                                | undefined


                                                            </td>



                                                            <td class="description last">

                                                                <p>CSS像素中画布的理想大小。当提供时，将根据
                                                                    <code>pixelRatio</code>设置画布和CSS的大小。如果没有提供，则不会更改当前的画布和CSS大小。

                                                                </p>
                                                            </td>
                                                        </tr>



                                                        <tr class="">

                                                            <td class="name"><code>pixelRatio</code></td>



                                                            <td class="type">


                                                                <span class="param-type">number</span>



                                                                (defaults to window.devicePixelRatio)


                                                            </td>



                                                            <td class="description last">

                                                                <p>画布的像素比（画布像素与CSS像素的比率）。</p>
                                                            </td>
                                                        </tr>


                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>


                                    </tbody>
                                </table>




                                <dl class="details">





















                                </dl>















                                <h5>Returns:</h5>
                                Canvas Immediate.
                                <br />




                            </dd>

                        </dl>



                        <h3 class="subsection-title">Type Definitions</h3>

                        <dl>

                            <dt class="">

                                <div class="nameContainer">
                                    <div class="anchor" id="~OrderFunction">
                                    </div>
                                    <h4 class="name">
                                        OrderFunction<span class="signature">()</span>



                                    </h4>

                                    <div class="tag-source">
                                        <a
                                            href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/render.js">render.js</a>,
                                        <a
                                            href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/render.js#L26">line
                                            26</a>
                                    </div>

                                </div>


                            </dt>
                            <dd class="">




                                <div class="description">
                                    <p>在渲染之前对要素进行排序时要使用的函数。它接受两个<a
                                            href="module-ol_Feature-Feature.html"><code>Feature</code></a> or
                                        <a
                                            href="module-ol_render_Feature-RenderFeature.html"><code>RenderFeature</code></a>的实例，并返回一个
                                        <code>{number}</code>。
                                    </p>
                                </div>











                                <dl class="details">





















                                </dl>













                            </dd>



                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~State">
                                    </div>
                                    <h4 class="name">
                                        State<span class="type-signature type object">{Object}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">



                                <dl class="details">


                                    <h5 class="subsection-title">Properties:</h5>

                                    <dl>

                                        <table class="props">
                                            <thead>
                                                <tr>

                                                    <th>Name</th>


                                                    <th>Type</th>

                                                    <th class="last">Description</th>
                                                </tr>
                                            </thead>

                                            <tbody>


                                                <tr>

                                                    <td class="name"><code>context</code></td>


                                                    <td class="type">


                                                        <span class="param-type">CanvasRenderingContext2D</span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>图层渲染到的画布上下文。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>feature</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_Feature.html#~FeatureLike">FeatureLike</a></span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>Feature.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>geometry</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_geom_SimpleGeometry-SimpleGeometry.html">SimpleGeometry</a></span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>Geometry.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>pixelRatio</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>图层渲染器使用的像素比。</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>resolution</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>创建和优化渲染批次所针对的分辨率。这不是正在渲染的视图的分辨率。
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>rotation</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>渲染图层的弧度旋转。</p>

                                                    </td>
                                                </tr>


                                            </tbody>
                                        </table>
                                    </dl>






















                                </dl>



                            </dd>



                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~ToContextOptions">
                                    </div>
                                    <h4 class="name">
                                        ToContextOptions<span class="type-signature type object">{Object}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">



                                <dl class="details">


                                    <h5 class="subsection-title">Properties:</h5>

                                    <dl>

                                        <table class="props">
                                            <thead>
                                                <tr>

                                                    <th>Name</th>


                                                    <th>Type</th>

                                                    <th class="last">Description</th>
                                                </tr>
                                            </thead>

                                            <tbody>


                                                <tr>

                                                    <td class="name"><code>size</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_size.html#~Size">Size</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>CSS像素中画布的理想大小。当提供时，将根据<code>pixelRatio</code>设置画布和CSS的大小。如果没有提供，则不会更改当前的画布和CSS大小。
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>pixelRatio</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>



                                                        <br>(defaults to window.devicePixelRatio)


                                                    </td>

                                                    <td class="description last">
                                                        <p>画布的像素比（画布像素与CSS像素的比率）。</p>

                                                    </td>
                                                </tr>


                                            </tbody>
                                        </table>
                                    </dl>






















                                </dl>



                            </dd>

                        </dl>



                    </article>

                </section>




            </div>
        </div>
    </div>
    <script>prettyPrint();</script>
    <script src="scripts/linenumber.js"></script>
    <script src="scripts/main.js"></script>
</body>

</html>